<template>
  <quill-editor
    v-model="newContent"
    ref="myQuillEditor"
    :options="editorOption"
    @change="changeContent"
  >
  </quill-editor>
</template>

<script>
// 导入 富文本编辑器
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'

// 工具栏配置
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  ['blockquote', 'code-block'], // 引用  代码块-----['blockquote', 'code-block']
  [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  ['link', 'image'] // 链接、图片、视频-----['link', 'image', 'video']
]
export default {
  name: 'question-quill',
  components: {
    quillEditor
  },
  props: {
    content: {
      type: String
    }
  },
  data () {
    return {
      // 修改富文本标签
      editorOption: {
        placeholder: '请输入文档内容~',
        theme: 'snow', // or 'bubble'
        modules: {
          toolbar: {
            container: toolbarOptions
          }
        }
      },
      newContent: this.newContent
    }
  },
  methods: {
    changeContent (value) {
      this.$emit('checkContent', value)
    }
  },
  watch: {
    content (newVal) {
      this.newContent = newVal
    }
  }
}
</script>

<style></style>
